<template>
  <div class="page-container">
	 <el-dialog title="库位库存信息"   class="my-dialog-class" width="70%" height="500" :visible.sync="dialogVisible"   
		  :before-close="handleClose"   @opened="onDialogOpened()"  :append-to-body="appendToBody">
			<div class="gk-layout-main" style="height:420px" > 
				<el-form :model="selectStock"  label-width="90px" ref="dataForm1" :size="global.gSize" :rules="dataFormRules" label-position="right">
					<el-row :gutter="24">
						<el-col :span="12">
							<el-form-item label="托盘条码" prop="boxCode">
								<el-input v-model="selectStock.boxCode"  auto-complete="off" style="width: 100%;"   :disabled="selectStock.id>0"/>	
							</el-form-item>
						</el-col> 
					</el-row>
				</el-form>
				<my-table :data="detailList"    v-loading="loading" :key="timer" >
					<el-table-column :label="$t('action.desc')" width="50" fixed="left"  header-align="center" align="center">
						<template slot-scope="scope">   {{scope.$index+1}}   </template>
					</el-table-column> 
					<Column  prop="itemId" label="物料名称" width="300"  :formatter= "itemFilter" />
					<Column label="数量" prop="countDb"   :formatter= "countFormat" />
					<Column   prop="status" label="状态"    :formatter= "selectionFormat" />
					<Column   prop="createTime" label="入库时间"     :formatter= "dateFormatDay" />
					<el-table-column    :label="$t('action.operation')" width="120">
						<template slot-scope="scope">
							<kt-button   label="查看"  perms="core:coreStock:showDetail"    v-if="!scope.row.edit"  @click="editRow(scope,true)" />

						</template>
					</el-table-column>
				</my-table>
		 </div>
		 <div slot="footer"  class="dialog-footer">
		 	<el-button :size="global.gSize" v-if="selectStock.id>0"  @click.native="bandDet()">绑定明细</el-button>
			 <!--
			 <el-button :size="global.gSize" v-if="selectStock.id>0"  @click.native="addDet()">添加明显</el-button>
			 -->
			<el-button :size="global.gSize"   type="primary"   :loading="editLoading"  @click.native="submitForm">{{$t('action.submit')}}</el-button>
			<el-button :size="global.gSize"  @click.native="handleClose()">{{$t('action.cancel')}}</el-button>
		</div>

		</el-dialog>
		<core-stock-Det   :detDialogVisible="detVisible"    :id=det.id   @myClose="detClose"  />

		<el-dialog title="待选明细"   width="50%" height="500" :visible.sync="selectDetdialogVisible"   
		  :before-close="selectDethandleClose"   @opened="selectDetfindPage(1)"   >
		  	 <div class="gk-layout-container">
				<div class="gk-layout-header">
					
					<s-query perms="material:item"   @click="selectDetfindPage"   > 
							<s-item  v-model="filters.itemId"/>
							 
					</s-query> 
				</div>		
				<div class="gk-layout-main"  style="height:300px">
					<my-table :data="pageResult.content"  :loading="loading"  >
						<el-table-column :label="$t('action.desc')" width="50" header-align="center" align="center">
							<template slot-scope="scope"> {{scope.$index+1}} </template>
						</el-table-column> 
						<column prop="itemId" label="物料名称"  width="250"    :formatter="itemFilter"/> 
						<column prop="countDb" label="数量"  :formatter= "countFormat"/> 
						<el-table-column header-align="center" align="center"   :label="$t('action.operation')">
							<template slot-scope="scope">
								<kt-button icon="fa fa-view"  type="text"  label="选择" perms="core:coreStock:showDetail"  @click="handleSelect(scope.$index, scope.row)" />
							</template>
						</el-table-column>
					</my-table>	
				</div>
				<div  class="toolbar gk-layout-footer"  style="height:30px">
					<el-pagination layout="total, prev, pager, next, jumper" @current-change="selectDetfindPage"
						:current-page="filters.pageNum" :page-size="filters.pageSize" :total="pageResult.totalSize"
						style=" position:absolute;  right:0;">
					</el-pagination>
				</div>
		</div>
		</el-dialog>
	</div>
</template>


<script>

import KtButton from "@/views/Core/KtButton"
import MyTable from "@/views/Core/MyTable"
import Column from "@/views/Core/Column"
import { format,formatDay } from "@/utils/datetime"
import {  dictsFormat ,getItemName} from "@/utils/myUtil"
import SDictForm from "@/components/Kj/SDictForm"
import SItem from "@/components/Kj/SItem"
import CoreStockDet from "@/dialog/CoreStockDet"
import SQuery from "@/components/Kj/SQuery"
import { validatorNumber } from "@/utils/validate"
 
export default {
	components:{
			MyTable,
			KtButton,
		    Column,
			SDictForm,
			CoreStockDet,
			SQuery,
			SItem
	},
	props: {
			 appendToBody:{
				 type:Boolean,
				 default:true,
			 },
			dialogVisible: false,
			row: {
					type:Object
			}
		},
	data() { 
		return { 
	 		timer:new Date().getTime() , //声明timer  
			deleteIds:[],
			loading: false,
			selectStock:{},
			detailList:[],
		 	det:{id:0,pid:0,pkId:0,status:2},
			detVisible:false,
			rowId:0, 
			editLoading: false,	 
			dataFormRules: {
                    barCode: [{ required: true, trigger: 'blur' , message: "请输入条码"}],
					countDb: [{ required: true, trigger: 'blur',validator: validatorNumber }]
            }, 
			selectDetdialogVisible:false,
			filters: {
					storeStatus: 2,
					pid:0,
					pageNum: 1, pageSize: 7 
			},
			pageResult: {}, 
		}
	},
	methods: {
		selectDethandleClose:function(){
			this.findDetailPage();
			this.selectDetdialogVisible=false;
		},
		bandDet:function(){
		
			this.selectDetdialogVisible=true;
			
		},

		selectDetfindPage: function (data) {
			if(data!=-1){
				data = data || 1
				this.filters.pageNum = data
			}	 
			this.$api.coreStock.findDetailPage(this.filters).then((res) => {
				this.pageResult = res.data
			}) 
		},
		addDet:function(){
			this.det={id:0,pid:0,pkId:0,status:2}
			this.detVisible=true;
		},

		 
		detClose:function(det){
			this.findDetailPage();
			this.detVisible=false;
		},
		
		countFormat: function (row, column, cellValue, index) {
			return cellValue +dictsFormat("units",row.unit)
		},

		itemFilter: function (row, column, cellValue, index) { 
			return getItemName(cellValue )
		},

		onDialogOpened:function(){
			this.selectStock=this.row;
			this.findDetailPage();

		},
	    // 显示编辑界面
		findDetailPage: function (data) {
		 
			if(this.selectStock.id>0){
				this.$api.coreStock.GetListByStockId(this.selectStock ).then((res) => {
					this.detailList= res.data
					this.timer = new Date().getTime(); 
				}) 
			}else{
					this.detailList= []
			}
			this.deleteIds=[];
		},



		editRow:function(scope ,b){  
			this.det=scope.row;
			this.detVisible=true; 
		},
		 
		 
	 	handleSelect:function(scope ,b){
			b.pid=this.selectStock.id;
			this.$api.coreStock.setDetailStock(b).then((res) => {
					this.selectDetfindPage(-1);
			})
		}, 
		//新增
		submitForm: function () {
			if(!this.selectStock.boxCode){
				this.$message({ message:"请输入托盘条码", type: 'error' })
				return;
			}
			this.editLoading = true
			var data={detList:this.detailList,main:this.selectStock,deleteIds:this.deleteIds}
		    data={main:this.selectStock}
			this.$api.coreStock.SaveStock(data).then((res) => {
				this.editLoading = false
				if (res.code == 200) {
					this.$message({ message: this.$t('action.operateSucess'), type: 'success' })
			
				    this.selectStock=res.data;
					this.findDetailPage()
				} else {
					this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
				}
			
			}) 
		},
		handleClose: function () {
			this.$refs['dataForm1'].resetFields()
            this.$emit('stockViewHidden', {})
          },
		 
		// 时间格式化
      	dateFormatDay: function (row, column, cellValue, index){
          	return formatDay(row[column.property])
      	},
		selectionFormat: function (row, column, cellValue, index){
			
			let key=""
			let propt=column.property;
			if(propt=="status"){
				key="stockStatus"
			}else if (propt == "storeStatus") {
					key = "storeStatus"
			} else if(propt=="locked"){
				key="isLocked"
			}else if(propt=="wh"){
				key="wh"
			}
	  
          	return dictsFormat(key,cellValue)
      	}
	},
	 created () {
       
		 
    },
	mounted(){
		 
	}
}
</script>
